<template>
  <div class="app" >
    <div style="margin:20px 20px auto;background-color: white;height: 380px">
      <!--添加按钮和导出文件-->
      <div class="btn_add" style="margin-bottom: 10px">
        <Button type="primary" @click="showAdd" shape="circle">
          <Icon type="plus-round"></Icon>
          添加活动
        </Button>
        <Button type="primary" shape="circle" @click="exportData()">
          <Icon type="ios-download-outline"></Icon>
          导出数据
        </Button>
      </div>
      <!--添加活动界面-->
      <Modal
        v-model="model2"
        title="活动信息添加">
        <Form :model="Notice" :label-width="80">
          <Form-item label="活动标题：">
            <Input v-model="Notice.title" placeholder="请输入活动标题"></Input>
          </Form-item>
          <Form-item label="活动内容：">
            <Input  v-model="Notice.content" placeholder="请输入活动内容"></Input>
          </Form-item>
          <Form-item label="创建时间：">
            <Input v-model="Notice.date" placeholder="请输创建时间"></Input>
          </Form-item>
        </Form>
        <div style="margin-left: 350px">
          <Button type="info" @click="addNotice()">添加</Button> &nbsp;&nbsp;&nbsp;&nbsp;
          <Button type="dashed" @click="model2 = false">取消</Button>
        </div>
        <!--去除按钮-->
        <div slot="footer"></div>
      </Modal>
      <!--表单-->
      <div class="table_row"><Table stripe border width="1100" :context="self" :columns="columns7" :data="Notices" ref="table"></Table></div>
      <!--修改活动界面-->
      <Modal
        v-model="modal1"
        title="活动信息修改">
        <Form :model="pro" :label-width="80">
          <Form-item label="活动标题：">
            <Input v-model="pro.title" placeholder="请输入活动标题"></Input>
          </Form-item>
          <Form-item label="活动内容：">
            <Input v-model="pro.content" placeholder="请输入活动内容"></Input>
          </Form-item>
          <Form-item label="创建时间：">
            <Input v-model="pro.date" placeholder="请选择创建时间"></Input>
          </Form-item>
        </Form>
        <div>
          <div style="margin-left: 350px">
            <Button type="info" @click="updateNotice()">修改</Button> &nbsp;&nbsp;&nbsp;&nbsp;
            <Button type="dashed" @click="model1 = false">取消</Button>
          </div>
        </div>

        <!--去除按钮-->
        <div slot="footer"></div>
      </Modal>
    </div>
    <div style="margin-left: 25px">
      <!--分页-->
      <Page style="margin-top: 20px"  :total="dataCount" :page-size="pageSize" show-total class="paging" @on-change="Page" @on-page-size-change="pageSizes"></Page>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        /*分页*/
        // 初始化信息总条数
        dataCount:0,
        // 每页显示多少条
        pageSize:6,
        /*回显的数据*/
        Notices:[{}],
        //标题
        columns7: [
          {
            title:'内容编号',
            key:'id'
          },
          {
            title: '内容标题',
            key: 'title',
          },
          {
            title: '发布内容',
            key: 'content'
          },
          {
            title:'创建时间',
            key:'date'
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center',
            render: (h, data) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  on: {
                    click: () => {
                      this.show(data.row.id)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(data.row.id)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        /*后台拿到的数据*/
        Date:[{}],

        /*权限*/
        arr:['普通用户','管理员'],
        modal1:false,
        model2:false,
        self: this,
        Notice:{},
        pro:{},
      };
    },
    methods: {

      /*导出数据*/
      exportData() {
        this.$refs.table.exportCsv({
          filename: 'data'
        });
      },
      /*查询所有活动*/
      findAll(){
        let _this = this
        this.$axios.get("http://localhost:8089/notice/getNotice").then(function(res){
          _this.dataCount = res.data.length
          if(res.data.length < _this.pageSize){
            _this.Notices = res.data
            _this.Date = res.data
          }else {
            _this.Notices = res.data.slice(0,_this.pageSize);
            _this.Date = res.data
          }
          console.log(_this.Notices)
        }).catch(function (err) {
          alert('查询失败')
        })
      },

      /*分页*/
      Page(index){
        let _start = ( index - 1 ) * this.pageSize;
        let _end = index * this.pageSize;
        this.Notices = this.Date.slice(_start,_end);
      },
      pageSizes(pageSize){
        this.pageSize = pageSize;
        this.findAll()
      },
      /*打开添加活动界面*/
      showAdd(){
        this.model2 = true
      },
      /*添加用户*/
      addNotice(){
        if(!this.Notice.title){alert('请输入活动标题');return false}
        if(!this.Notice.content){alert('请输入活动内容');return false}
        if(!this.Notice.date){alert('请选择活动创建时间');return false}
        console.log(this.Notice)
        let _this = this
        this.$axios.post("http://localhost:8089/notice/setNotice",this.Notice).then(function () {
          //清空本次保存数据
          alert("活动信息添加成功！")
          _this.Notice = {};
          _this.model2 = false
          _this.findAll();
        }).catch(function (err) {
          alert("活动信息添加失败，请稍后再试")
        })
      },
      /*打开修改界面，根据id查询活动*/
      show(index) {
        this.modal1 = true
        let _this = this
        this.$axios.get("http://localhost:8089/notice/getNoticeById/"+index).then(function(res){
          _this.pro = res.data
          console.log(res.data)
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*更新活动*/
      updateNotice(){
        let _this = this
        // 发送axios请求，根据查询一个
        this.$axios.post("http://localhost:8089/notice/updateNotice",_this.pro).then(function (res) {
          alert('活动信息修改成功!')
          _this.modal1 = false
          _this.findAll();
        }).catch(function (err) {
        })
      },
      /*删除活动*/
      remove(id) {
        let _this = this
        console.log(id)
        if(window.confirm('确定要删除活动吗？')){
          // 发送axios请求，根据查询一个
          this.$axios.post("http://localhost:8089/notice/deletedById/"+id).then(function () {
            _this.findAll();
            alert("活动删除成功！")
          }).catch(function (err) {
            console.log(id)
            alert("删除失败,请联系管理员！")
          })
        }
      },
    },
    //初始化阶段 brforeCreate 内部事件 生命周期
    created(){
      this.findAll();

    }
  };
</script>

<style scoped>


</style>
